<template>
	<view class="u-p-20">
		<view class="u-p-t-20 bg-white">
			<view class="flex flex-column align-center u-m-t-30">
				<text class="u-font-30 font-weight-bold">上传营业执照</text>
				<view class="flex-1 flex u-m-t-30">
					<view class="position-relative" style="width: 330rpx;height: 200rpx;">
						<image :src="$_BASE_IMG_API + form.business_image" style="width: 330rpx;height: 200rpx;border:2rpx solid #ccc"></image>
						<view v-if="form.business_image" class="position-absolute flex justify-center" style="background: #fa3534;width: 44rpx; height: 44rpx; border-radius: 100rpx; top: 10rpx; right: 10rpx;" @click="clear">
							<u-icon name="close" color="#fff" size="20"></u-icon>
						</view>
					</view>
					<view class="flex-1 flex flex-column align-center u-p-l-30">
						<text>需要上传营业执照</text>
						<u-upload ref="uUpload" :max-size="2 * 1024 * 1024" :show-tips="false" @on-oversize="oversize" :custom-btn="true" @on-choose-complete="(lists,name)=>uploadChange(lists)" :show-upload-list="false" maxCount="1">
							<view slot="addBtn" class="u-m-t-30" hover-class="slot-btn__hover" hover-stay-time="150">
								<u-tag text="点击上传" shape="circle"></u-tag>
							</view>
						</u-upload>
					</view>
				</view>
				<u-form :model="form" ref="uForm" labelWidth="250">
					<view class="u-p-x-30">
						<u-form-item label="营业执照编号" prop="business_no">
							<u-input v-model="form.business_no"  placeholder="请填写营业执照编号"/>
						</u-form-item>
						<u-form-item label="营业执照有效期" prop="license_validity_type">
							<u-radio-group v-model="form.license_validity_type" @change="radioChange()">
								<u-radio :name="1"> 长期有效 </u-radio>
								<u-radio :name="0"> 非长期有效 </u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="营业执照开始日期" prop="licenseStartDate">
							<u-input v-model="form.licenseStartDate" type="select" @click="licenseStartShow = true" placeholder="请选择营业执照开始日期" />
						</u-form-item>
						<u-form-item label="营业执照结束日期" prop="licenseEndDate">
							<!-- <u-input v-model="form.licenseEndDate" type="select" @click="licenseEndShow = true" placeholder="请选择营业执照结束日期" /> -->
							<!-- <u-input v-model="form.licenseEndDate" type="number" maxlength="8" @input="changeEndTime"  placeholder="请输入营业执照结束日期 格式为:YYYYMMDD" /> -->
							<view class="uni-list-cell-db">
								<picker mode="date" :value="form.licenseEndDate" :start="startDate" :end="endDate" @change="bindDateChange">
									<view class="uni-input" style="font-size: 28rpx;" v-if="form.licenseEndDate">{{form.licenseEndDate}}</view>
									<view style="font-size: 28rpx;color: #c6c6c6;" v-else>请选择营业执照结束日期</view>
								</picker>
							</view>
						</u-form-item>
						<u-form-item label="商户注册地址" prop="reg_region">
							<u-input v-model="form.reg_region" type="select" @click="showRegion = true"/>
						</u-form-item>
						<u-form-item label="商户经营地址" prop="reg_detail">
							<u-input v-model="form.reg_detail" type="textarea" height="50" placeholder="请填写商户经营地址"/>
						</u-form-item>
						<u-form-item label="客服电话" prop="service_phone">
							<u-input v-model="form.service_phone"  placeholder="请填写客服电话"/>
						</u-form-item>
						<u-form-item label="经营类型" prop="type">
							<u-radio-group v-model="form.busi_type">
								<u-radio :name="1"> 实体 </u-radio>
								<u-radio :name="2"> 虚拟 </u-radio>
							</u-radio-group>
						</u-form-item>
					<!-- 	<u-form-item label="小票名称" prop="receipt_name">
							<u-input v-model="form.receipt_name" placeholder="请填写小票名称"/>
						</u-form-item>
						<u-form-item label="税务登记证" prop="tax_reg_pic">
							<u-upload :auto-upload="false" ref="uUpload1" max-count="1" width="150" height="150"></u-upload>
						</u-form-item> -->
						<u-form-item label="开户许可证" prop="reg_acct_pic">
							<u-upload @on-choose-complete="uploadSuccess" index="reg_acct_pic" :file-list="log.reg_acct_pic ? [{url:log.reg_acct_pic}] : []" ref="uUpload2" max-count="1" :max-size="2 * 1024 * 1024" width="150" height="150"></u-upload>
						</u-form-item>
						<u-form-item label="注册资本" prop="reg_capital">
							<u-input v-model="form.reg_capital" type="number" height="50" placeholder="请填写注册资本"/>
						</u-form-item>
						<u-form-item label="成立时间" prop="foundDate">
							<u-input v-model="form.foundDate" type="select" @click="foundShow = true" placeholder="请选择成立时间" />
						</u-form-item>
						<u-form-item label="银行支行编码" prop="branch_name">
							<u-input class="bank" v-model="form.branch_name" type="select" @click="branchShow = true"/>
						</u-form-item>
						
						<u-form-item v-if="form.branch_name" class="position-relative" label="银行支行名称" prop="branch_code1">
							<!-- <input @input="handleInput" placeholder="请输入银行支行名称"/> -->
							<u-input type="text" @input="handleInput" v-model="form.branch_code1" placeholder="请输入银行支行名称" />
							<view v-if="showBank" class="list position-absolute flex flex-column" :style="{height: showBankHeight+'rpx',top:showBankTop+'rpx'}">
								<text v-for="(item,index) in branchList1" :key="index" @click="checkBank(item)">{{item.name}}</text>
							</view>
						</u-form-item>
						
						<u-form-item label="联系人电话" prop="contact_phone">
						<view class="flex flex-1">
							<u-input class="flex-1" v-model="form.contact_phone" type="number" placeholder="请填写店铺联系人电话"/>
							<dy-phone-code-button :mobile='form.contact_phone'></dy-phone-code-button>
						</view>
						</u-form-item>
						<u-form-item label="输入短信验证码" prop="captcha">
							<u-input v-model="form.captcha" type="number" placeholder="请输入短信验证码"/>
						</u-form-item>
					</view>
				</u-form>
				<view class="u-p-y-50">
					<dy-button width="576rpx" size="default" @click="submit">提交</dy-button>
				</view>
			</view>
		</view>
		<u-picker mode="time" v-model="licenseStartShow" @confirm="licenseStartChange" :params="{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				}"></u-picker>
		<u-picker mode="time" v-model="licenseEndShow" @confirm="licenseEndChange" :params="{
			year: true,
			month: true,
			day: true,
			hour: false,
			minute: false,
			second: false
		}"></u-picker>
		<u-picker v-model="showRegion" mode="region" @confirm="confirmRegion"></u-picker>
		<u-picker mode="time" v-model="foundShow" @confirm="foundChange" :params="{
			year: true,
			month: true,
			day: true,
			hour: false,
			minute: false,
			second: false
		}"></u-picker>
		<u-select v-model="branchShow" :list="branchList" label-name="name" value-name="code" @confirm="branchConfirm"></u-select>
	
		<!-- <u-picker v-model="branchShow" ref="ref" mode="multiSelector" :range="branchList" range-key="name" :default-selector="select"
			@confirm="branchConfirm" @columnchange="changeBranch" ></u-picker> -->
	</view>
 
</template>

<script>
	import { mapActions } from 'vuex'
	import { MineCenterApi } from '@/api/serves.js'
	export default {
		data() {
			return {
				date:'2023-12-2',
				startDate:'1900-1-1',
				endDate:'2100-1-1',
				select:[0,0], // 默认选中
				page:1, //页码
				currentColumn:0, // 当前列
				licenseStartShow: false,
				licenseEndShow: false,
				showRegion: false,
				foundShow: false,
				branchShow: false,
				branchList: [],
				branchList1:[],
				showBank:false, // 显示银行支行列表
				showBankHeight:'',// 显示银行支行列表高度
				showBankTop:'',// 显示银行支行列表定位
				log:{},
				form: {
					business_no:'',
					license_validity_type:1,
					licenseStartDate:'',
					license_begin_date:'',
					licenseEndDate:'',
					license_end_date:'',
					reg_region:'',
					reg_detail:'',
					service_phone:'',
					busi_type:1 ,
					receipt_name: '',
					tax_reg_pic: '' ,
					reg_acct_pic: '' ,
					reg_capital: '' ,
					branch_name: '' ,
					branch_code: '' ,
						branch_code1:'',
					business_image: '',
					contact_phone: '',
					captcha : '',
				},
				rules: {
					business_no: [{required: true,message: '请输入营业执照编号',trigger: ['blur', 'change']}],
					licenseStartDate: [{
						required: true,
						message: '请选择营业执照开始日期',
						trigger: ['blur', 'change']
					}],
					licenseEndDate: [{
						validator: (rule, value, callback) => {
							if (this.form.license_validity_type == 0 && !value) {
									callback(new Error("请选择营业执照结束日期"));
								} else {
									callback();
							}
						}
					},],
					reg_region: [{
						required: true,
						message: '请选择注册公司省市区',
						trigger: ['blur', 'change']
					}],
					reg_detail: [{
						required: true,
						message: '请输入注册详细地址',
						trigger: ['blur', 'change']
					}],
					service_phone: [{
						required: true,
						message: '请输入客服电话',
						trigger: ['blur', 'change']
					}],
					// receipt_name: [{
					// 	required: true,
					// 	message: '请输入小票名称',
					// 	trigger: ['blur', 'change']
					// }],
					reg_capital: [{
						required: true,
						message: '请输入注册资本',
						trigger: ['blur', 'change']
					}],
					foundDate: [{
						required: true,
						message: '请选择成立时间',
						trigger: ['blur', 'change']
					}],
					branch_name: [{
						required: true,
						message: '请选择银行支行',
						trigger: ['blur', 'change']
					}],
					branch_code1: [{
						required: true,
						message: '请选择银行支行名称',
						trigger: ['blur', 'change']
					}],
					contact_phone: [
						{
							required: true,
							message: '请输入正确的手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (!this.$u.test.mobile(value)) {
									callback(new Error("请输入正确的手机号码"));
								} else {
									callback();
								}
							}
						},
					],
					captcha: [{
						len: 6,
						required: true,
						message: '请输入6位数验证码',
						trigger: ['blur', 'change'],
					}],
				}
			};
		},
		onUnload() {
			console.log('onUnload');
			uni.setStorageSync('applyForm_3', this.form)
		},
		onLoad(options) {
			let applyForm = uni.getStorageSync('applyForm_3') || {}
			let applyForm1 = uni.getStorageSync('applyForm_1') || {}
			this.log = applyForm1
			if(applyForm1.id){
				this.form = {
					...this.form,
					...applyForm1
				}
				this.form.foundDate = applyForm1.found_date
				this.form.branch_name = applyForm1.bank_name
				this.form.branch_name = applyForm1.bank_name
				this.form.branch_code1 = applyForm1.bank_code_text
			}
			if(applyForm) {
				this.form.business_image = applyForm.business_image || applyForm1.business_image || ''
				this.form.business_no = applyForm.business_no || applyForm1.business_no || ''
				this.form.licenseStartDate = applyForm.license_begin_date || applyForm1.license_begin_date || ''
				this.form.licenseEndDate = applyForm.license_end_date || applyForm1.license_end_date || ''
				// this.form.reg_region = applyForm.license_end_date || applyForm1.license_end_date || ''
			}
			this._getbranchList()
			this.$refs.uForm.setRules(this.rules);
			console.log('applyForm_3', applyForm);
		},
		methods: {
			...mapActions({	upload:'user/upload' }),
			uploadSuccess(files, name){
				this.upload(files).then(res=> {
					if(res.length>0) {
						if(name === 'inside_images'){
							let arr = this.form[name]?.split(',') || []
							arr.push = this.$_BASE_IMG_API + res[0]
						}else{
							this.form[name] = this.$_BASE_IMG_API + res[0]
						}
						
					}
				})
			},
			oversize(file,lists,name){
				console.log('超出大小',{file,lists,name});
				if(file.size > 2 * 1024 * 1024){
					console.log(this.$u.toast);
					this.$u.toast('上传文件不能超过2M')
				}
				
			},
			async _getbranchList(){
				let list = await MineCenterApi.getbranchList({level:1,page:1})
				
				this.branchList = list.data
				console.log(this.branchList);
				// let p1 = await MineCenterApi.getbranchList({level:1,page:1})
				// let p2 = await MineCenterApi.getbranchList({level:2,p_id:1,keyword:'工商',page:1})
				// let list = await Promise.all([p1,p2])
				// console.log('111',list);
				// this.branchList  = [list[0].data,list[1].data]
			},
			uploadChange(lists, type){
				this._upload(lists)
			},
			_upload(lists, type) {
				this.upload(lists).then(res=> {
					console.log('res1111', res);
					if(res.length>0) {
						this.form.business_image = res[0]
					}
				})
			},
			_upload1(lists, type) {
			 return new Promise((resolve,reject)=> {
				 this.upload(lists).then(res=> {
						resolve(res)
				 })
			 })	
			},
			submit() {
				if(!this.form.business_image) return this.$u.toast('请上传营业执照图片', 2000)
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						let files1 = this.$refs.uUpload.lists
						let files2 = this.$refs.uUpload2.lists
						// if(!files1.length) return this.$u.toast('请上传税务登记证图片', 2000)
						if(!files2.length) return this.$u.toast('请上传开户许可证图片', 2000)
						// let task1 = this._upload1(files1, 1)
						// let task2 = this._upload1(files2, 2)
						uni.showLoading()
						// Promise.all([task1,task2]).then((res)=> {
						// 	uni.hideLoading()
						// 	console.log(res);
						// 	this.form.tax_reg_pic = res[0].join(',')
						// 	this.form.reg_acct_pic = res[1].join(',')
						// 	console.log('applyForm_1', uni.getStorageSync('applyForm_1'));
						// 	console.log('applyForm_2', uni.getStorageSync('applyForm_2'));
							let params = {}
							Object.assign(params, uni.getStorageSync('applyForm_1'), uni.getStorageSync('applyForm_2'),this.form)
							uni.hideLoading()
							console.log('入驻参数',params);
							let api = params.id ? 'applyEditXW' : 'applyAdd'
							MineCenterApi[api](params).then(res => {
								uni.hideLoading()
							console.log('入驻申请', res);
								this.$u.toast(res.msg)
								if(res.code == 1){
									uni.navigateTo({
										url: '/pages/mine/mineEnterPages/mineEnterResult/mineEnterResult?type=add'
									})
								}
							})
						// })
					}
				});
			},
			// 删除营业执照
			clear(){
				this.$refs.uUpload.lists = []
				this.form.business_image = ''
			},
			licenseStartChange(e) {
				this.form.licenseStartDate = e.year + '-' + e.month + '-' + e.day
				this.form.license_begin_date =  e.year + e.month + e.day
			},
			licenseEndChange(e) {
				console.log(e);
				this.form.licenseEndDate = e.year + '-' + e.month + '-' + e.day
				this.form.license_end_date =  e.year + e.month + e.day
			},
			bindDateChange(e) {
				console.log(e);
				this.form.licenseEndDate = e.detail.value
				this.form.license_end_date = e.detail.value.split('-').join('')
		   },
			changeEndTime(e){
				this.form.license_end_date = e
				this.$Toast({
					title:e
				})
				console.log(this.form.license_end_date);
			},
			radioChange(){
				this.form.licenseStartDate = ''
				this.form.license_begin_date = ''
				this.form.licenseEndDate = ''
				this.form.license_end_date =  ''
			},
			confirmRegion(e) {
				console.log(e);
				this.form.reg_region = `${e.province.label},${e.city.label},${e.area.label}`
			},
			foundChange(e) {
				console.log(e);
				this.form.foundDate = e.year + '-' + e.month + '-' + e.day
				this.form.found_date =  e.year + e.month + e.day
			},
			branchConfirm(data) {
				console.log('确认',data);
				// let {code,name} = this.branchList[1][data[1]]
				// this.form.branch_name = name
				// this.form.branch_code = code
				
				this.form.branch_name = data[0].label
				this.form.branch_code = data[0].value
			},
			async changeBranch(e){
				console.log('切换',e);
				let {column,index} = e
				this.$set(this.select,column,index) // 当前选中的选项	重要！！！	
				if(column === 0){
					this.page = 0
					this.$set(this.select,1,0)
					console.log(this.select);
					console.log('当前页页码',this.page);
					let p_id = this.branchList[column][index].id
					let params = {
						level: 2, // 2 查询 地方银行
						p_id:p_id, // 一级银行id
						page:this.page,  //页码
					}
					let res = await MineCenterApi.getbranchList(params)
					console.log(res);
					this.$set(this.branchList,1,res.data)
				}else if(column === 1 && index >= this.branchList[1].length - 10){
					console.log('快到底了,加载新的');
					this.page++
					console.log(this.select);
					let p_id = this.branchList[0][this.select[1]].id
					let params = {
						level: 2, // 2 查询 地方银行
						p_id:p_id, // 一级银行id
						page:this.page,  //页码
					}
					let res = await MineCenterApi.getbranchList(params)
					let arr = this.branchList[1].concat(res.data)
					this.$set(this.branchList,1,arr)
				}
			},
		   // 搜索银行支行名称
			async handleInput(e){
			  console.log(e);
			  this.showBank = e ? true : false
			  if(e){
				  let index = this.branchList.findIndex(item=>item.code == this.form.branch_code)
				  let list = await MineCenterApi.getbranchList({level:2,p_id:this.branchList[index].id,keyword:e})
				  this.branchList1 = list.data
				 
				  switch (list.data.length){
				  	case 1:
						this.showBankHeight = 74
						this.showBankTop = -74
				  		break;
					case 2:
						this.showBankHeight = 2*74
							this.showBankTop = -74 * 2
				  		break;
					case 3:
						this.showBankHeight = 3*74
						this.showBankTop = -74 * 3
				  		break;
				  	default:
						this.showBankHeight = 264
						this.showBankTop = -266
				  		break;
				  }
				  console.log(list);
			  }
			 
		   },
		   // 选择银行支行
		   checkBank(item){
			   console.log(item);
			   this.showBank = false
			   this.form.branch_code = item.code
			   this.form.branch_code1 = item.name
		   }
		}
	}
</script>

<style lang="scss">
.list{
	width: 100%;
	height: 264rpx;
	overflow-y: scroll;
	background-color: #fefefe;
	// background-color: #ffaa7f;
	border: 1px solid #eee;
	left: 0;
	top: -266rpx;
	z-index: 9;
	text{
		text-align: center;
		border-bottom: 1px solid #eee;
	}
}
</style>
